-@title= 'Window | Admin Page '
-@page_classes= 'window easyui-layout'

.container
  .col-12
    %h1 Easy UI Window
    %a.easyui-linkbutton.l-btn-primary{href:'javascript:void(0)', onclick:'qc.demoWindowA.openWindow()'}
      打开窗口
    %a.easyui-linkbutton.l-btn-primary{href:'javascript:void(0)', onclick:'qc.demoWindowB.openWindow()'}
      Window with footer
    %a.easyui-linkbutton.l-btn-primary{href:'javascript:void(0)', onclick:'qc.demoWindowC.openWindow()'}
      Window with validate form
.container
  %hr.col-12
  .col-12
    .panel.panel-default
      .panel-header
        %h3.panel-title
          Window | Source Code
      .panel-body
        :code
          # lang: html
          //#####
          // Button
          //################################

          <a class="easyui-linkbutton l-btn-default" href="javascript:void(0)" onclick="qc.demoWindowA.openWindow()">打开窗口</a>

          //#####
          // Window
          //################################

          <div class="hidden" id="qc-window-windowObjA">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-2 control-label">
                  Email
                </label>
                <div class="col-10 col-last">
                  <input class="easyui-textbox" data-options="prompt:'Email', width:250, height:34, iconCls:'fa fa-user', iconWidth:38" type="text" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-2 control-label">
                  Password
                </label>
                <div class="col-10 col-last">
                  <input class="easyui-textbox" data-options="prompt:'Password', width:250, height:34, iconCls:'fa fa-lock', iconWidth:38" type="password" />
                </div>
              </div>
              <div class="form-group">
                <div class="col-push-2 col-10">
                  <div class="checkbox">
                    <label>
                      <input class="easyui-checkbox" type="checkbox" />
                      Remember me
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-push-2 col-10">
                  <button class="easyui-linkbutton l-btn-primary" type="submit">
                    Sign In
                  </button>
                </div>
              </div>
            </form>
          </div>

        :code
          # lang: js

          //#####
          // Javascript
          //################################

          Namespace.register("qc.demoWindowA");
          qc.main.pushWindowId("qc-window-windowObjA");
          qc.demoWindowA.windowObj = null;
          qc.demoWindowA.openWindow = function() {
            if (!qc.demoWindowA.windowObj) {
              qc.demoWindowA.windowObj = $("#qc-window-windowObjA").show().window({
                title: 'Easy UI Window Login',
                iconCls: 'fa fa-columns',
                modal: true,
                width: 450,
                height: 280,
                minimizable: false,
                closable: true
              });
            } else {
              qc.demoWindowA.windowObj.window("open");
            }
          };

#qc-window-windowObjA.hidden
  %form.form-horizontal
    .form-group
      %label.col-2.control-label Email
      .col-10.col-last
        %input.easyui-textbox{'data-options':"prompt:'Email', width:350, height:34, iconCls:'fa fa-user', iconWidth:38", type: 'text'}
    .form-group
      %label.col-2.control-label Password
      .col-10.col-last
        %input.easyui-textbox{'data-options':"prompt:'Password', width:350, height:34, iconCls:'fa fa-lock', iconWidth:38", type: 'password'}
    .form-group
      .col-push-2.col-10
        .checkbox
          %label
            %input.easyui-checkbox{type: 'checkbox'}
            Remember me
    .form-group
      .col-push-2.col-10
        %button.easyui-linkbutton.l-btn-primary{type: 'submit'} Sign in

#qc-window-windowObjB.hidden
  %p
    =lorem.sentences 6
  .text-right#ft
    %a.easyui-linkbutton.l-btn-primary{'data-options':"iconCls:'fa fa-check-circle-o'", href:'javascript:void(0)', onclick:"javascript:alert('ok')"}
      Ok
    %a.easyui-linkbutton.l-btn-danger{'data-options':"iconCls:'fa fa-times-circle-o'", href:'javascript:void(0)', onclick:"javascript:alert('cancel')"}
      Cancel

#qc-window-windowObjC.hidden
  %form#ff{'data-options':'novalidate:true', method: 'post'}
    .form-group
      %label.col-12 Name:
      %input.easyui-textbox{'data-options':'required:true, width:480, height:34', name: 'name', type: 'text'}
    .form-group
      %label.col-12 Email:
      %input.easyui-textbox{'data-options':"required:true, width:480, height:34, validType:'email'", name: 'email', type: 'text'}
    .form-group
      %label.col-12 Subject:
      %input.easyui-textbox{'data-options':'required:true, width:480, height:34', name: 'subject', type: 'text'}
    .form-group
      %label.col-12 Message:
      %input.easyui-textbox{'data-options':'multiline:true, width:480, height:60', name: 'message'}
    .form-group
      %button.easyui-linkbutton.l-btn-primary{onclick: 'submitForm()', type: 'submit'} Submit
      %button.easyui-linkbutton.l-btn-danger{onclick: 'clearForm()', type: 'submit'} Clear

:javascript
  Namespace.register("qc.demoWindowA");
  qc.main.pushWindowId("qc-window-windowObjA");
  qc.demoWindowA.windowObj = null;
  qc.demoWindowA.openWindow = function() {
    if (!qc.demoWindowA.windowObj) {
      qc.demoWindowA.windowObj = $("#qc-window-windowObjA").show().window({
        title: 'Easy UI Window Login',
        iconCls: 'fa fa-columns',
        modal: true,
        width: 450,
        height: 280,
        minimizable: false,
        closable: true
      });
    } else {
      qc.demoWindowA.windowObj.window("open");
    }
  };

  Namespace.register("qc.demoWindowB");
  qc.main.pushWindowId("qc-window-windowObjB");
  qc.demoWindowB.windowObj = null;
  qc.demoWindowB.openWindow = function() {
    if (!qc.demoWindowB.windowObj) {
      qc.demoWindowB.windowObj = $("#qc-window-windowObjB").show().window({
        title: 'Easy UI Window With Footer Buttons',
        iconCls: 'fa fa-columns',
        modal: true,
        width: 600,
        height: 400,
        footer: '#ft',
        minimizable: false,
        closable: true
      });
    } else {
      qc.demoWindowB.windowObj.window("open");
    }
  };

  Namespace.register("qc.demoWindowC");
  qc.main.pushWindowId("qc-window-windowObjC");
  qc.demoWindowC.windowObj = null;
  qc.demoWindowC.openWindow = function() {
    if (!qc.demoWindowC.windowObj) {
      qc.demoWindowC.windowObj = $("#qc-window-windowObjC").show().window({
        title: 'Easy UI Window With Validate Form',
        iconCls: 'fa fa-columns',
        modal: true,
        width: 515,
        height: 420,
        minimizable: false,
        closable: true
      });
    } else {
      qc.demoWindowC.windowObj.window("open");
    }
  };

  //Validate Form on Submit
  function submitForm(){
    $('#ff').form('submit',{
        onSubmit:function(){
            return $(this).form('enableValidation').form('validate');
        }
    });
  }
